<template>
  <div class="video_wrap">
    <el-button type="success" :disabled="isAdd" @click="open">
      添加视频
    </el-button>
    <el-table border :data="videoList">
      <el-table-column label="视频名称" prop="Vname"></el-table-column>
      <el-table-column label="视频时长" prop="Vtime"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-link type="danger" @click="delDirVideo(scope.row._id)"
              >删除</el-link
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog @close="close" title="添加视频" width="60%" :visible="vflag">
      <video-table
        @close="myclose"
        @sendvideolist="getList"
        :dirid="dirid"
        :isAddVideo="true"
      ></video-table>
    </el-dialog>
  </div>
</template>
<script>
import { _getDirVideo, _delDirVideo } from '../../api/courseadd'
import videoTable from '../video/videoTable.vue'

export default {
  data () {
    return {
      isAdd: true,
      vflag: false,
      videoList: [],
      dirid: ''
    }
  },
  computed: {
    dirID () {
      return this.$store.state.dirID
    }
  },
  beforeMount () {
    // 接受目录_id
    this.$bus.$on('changeDirId', res => {
      console.log(res)
      this.dirid = res
      this.isAdd = false
    })
  },
  watch: {
    dirID (newVal) {
      // 获取对应目录下的视频
      this.getDirVideo()
    }
  },
  methods: {
    getDirVideo () {
      _getDirVideo({
        CDid: this.$route.query._id,
        _id: this.dirid
      }).then(res => {
        console.log(res)
        this.videoList = res.data.list
      })
    },
    // 删除目录下的视频
    async delDirVideo (_id) {
      var res = await _delDirVideo({
        _id: this.dirid,
        Vid: _id,
        CDid: this.$route.query._id
      })
      console.log(res)
      this.$message.success('删除成功')
      this.getDirVideo()
    },
    myclose (flag) {
      this.vflag = flag
    },
    // 子组件传来的数据
    getList (list) {
      this.videoList = list
    },
    open () {
      this.vflag = true
    },
    close () {
      this.vflag = false
    }
  },
  components: { videoTable }
}
</script>
<style lang="less">
.video_wrap {
  width: 45%;
}
</style>
